<template>
  <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" class="main-form">
    <el-form-item label="板子层数：" class="alignleft">
        <PcbLayer @pcbLayer="changeLayer($event)"  />
    </el-form-item>
   
    <el-form-item label="板子大小：">
        <el-col :span="6">
            <el-input onkeyup="value=value.replace(/[^\d(\.)]/g,'')" v-model="formLabelAlign.x" placeholder="长" step="1" min="1" max="1020" class="inputpcb" @input="vali(formLabelAlign.x)"></el-input>
        </el-col>
        <el-col :span="0.1" class="line" >x</el-col>
        <el-col :span="6">
           <el-input onkeyup="value=value.replace(/[^\d(\.)]/g,'')" v-model="formLabelAlign.y" placeholder="宽"  step="1" min="1" max="1020"  class="inputpcb" @input="vali(formLabelAlign.y)"></el-input>
        </el-col>
        <el-col :span="6" class="line">(单位：毫米)</el-col>
    </el-form-item>
   
    <el-form-item label="板子数量：">
        <el-col :span="13">
           <PcbNum @orderCount="change($event)" />
        </el-col>
    </el-form-item>

       <el-col :span="5" class="bt">
           <el-button type="success" @click="onSubmit" >立即报价</el-button>
        </el-col>

</el-form>
</template>

<script>
import PcbLayer from '../../../../units/pcbLayer.vue'
import PcbNum from './pcbNum.vue'
export default {

    data() {
      return {
        // radio1: '2',
        labelPosition: 'right',
        formLabelAlign: {
          layer:"2",
          x:'',
          y:'',
          count: 0
        }
      };
    },
    methods:{
        vali:function(size){
            //实时获取用户输入的板子尺寸
            console.log(size);
        
        },
        change:function(data){
            //设置订单数量 data就是子组件传过来的数量
            this.formLabelAlign.count=data
        },
        onSubmit:function(){
            //提交在线计价
        
             //跳转到新的页面
             //let routes = this.$router.resolve({ name: "pcbNewOrder", query: this.formLabelAlign});
             //window.open(routes.href, "_blank");
            this.$router.push({name:'pcbNewOrder',query:this.formLabelAlign})
           
        },
          changeLayer:function(data){
            this.formLabelAlign.layer=data
            console.log("改变层"+this.formLabelAlign.layer)

        }
    },
    components:{PcbNum,PcbLayer}
}
</script>

<style >


.alignleft{
    text-align: left;

}
.line{
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
    color: #708293;

}
.main-form{
    font-weight: 700

}


.inputpcb input{
  padding-left: 15px;
  padding-right: 0px;

}

.bt button{
    margin:0px 80px  0px;
    padding: 12px 120px;
}




</style>